<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/shake.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.transit.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div class="web_two">
			<div class="cont">
				<div class="sou"><img src="img/shou.png"/></div>
				<div class="energy">
				<img src="img/Energy box.png"/>
				<div class="ydbg"><img src="img/Techfit.png"/></div>
			    </div>
			    <div class="pz">
			    	<img src="img/pz.png"/>
			    </div>
			    <div class="boom"><img src="img/bomb.png"/></div>
			    <div class="yh"><img src="img/yh.png"/></div>
			    <div class="hyu"><img src="img/hyu_one.png"/></div>
			    <div class="hyu_two"><img src="img/hyu_two.png"/></div>
			    <div class="hyu_three"><img src="img/hyu_three.png"/></div>
			    <div class="hyu_four"><img src="img/hyu_four.png"/></div>
			</div>
		</div>
		<!-- 结果一 -->
	    <div class="result_one">
	    	<div class="cont">
				<div class="energy">
				<img src="img/Energy box.png"/>
				<div class="ydbg"><img src="img/Techfit.png"/></div>
			    </div>
			    <div class="music"><img src="img/music.png"/></div>
			    <div class="renovate"><img src="img/sx.png"/></div>
			    <div class="shuzi_one"><img src="img/one.png"/></div>
			    <div class="shuzi_two"><img src="img/even.png"/></div>
			    <div class="shuzi_three"><img src="img/ten.png"/></div>
			    <div class="bot">
			    	<img src="img/ss.png"/>
			    	<div class="diwen"><img src="img/dwen_two.png"/></div>
			    </div>
	    	</div>
	    </div>
	    <!-- 结果二 -->
	    <div class="result_two">
	    	<div class="cont">
				<div class="energy">
				<img src="img/Energy box.png"/>
				<div class="ydbg"><img src="img/Techfit.png"/></div>
			    </div>
			    <div class="music"><img src="img/music.png"/></div>
			    <div class="renovate"><img src="img/sx.png"/></div>
			    <div class="shuzi_one"><img src="img/three.png"/></div>
			    <div class="shuzi_two"><img src="img/eight.png"/></div>
			    <div class="shuzi_three"><img src="img/ten.png"/></div>
			    <div class="bot">
			    	<img src="img/ss.png"/>
			    	<div class="diwen"><img src="img/dwen_two.png"/></div>
			    </div>
	    	</div>
	    </div>
	    <!-- 结果三 -->
	    <div class="result_three">
	    	<div class="cont">
				<div class="energy">
				<img src="img/Energy box.png"/>
				<div class="ydbg"><img src="img/Techfit.png"/></div>
			   </div>、
			    <div class="music"><img src="img/music.png"/></div>
			    <div class="renovate"><img src="img/sx.png"/></div>
			    <div class="shuzi_one"><img src="img/even.png"/></div>
			    <div class="shuzi_two"><img src="img/two.png"/></div>
			    <div class="shuzi_three"><img src="img/ten.png"/></div>
			    <div class="bot">
			    	<img src="img/ss.png"/>
			    	<div class="diwen"><img src="img/dwen.png"/></div>
			    </div>
	    	</div>
	    </div>
	    <!-- 结果四 -->
	    <div class="result_four">
	    	<div class="cont">
				<div class="energy">
				<img src="img/Energy box.png"/>
				<div class="ydbg"><img src="img/Techfit.png"/></div>
			   </div>、
			    <div class="music"><img src="img/music.png"/></div>
			    <div class="renovate"><img src="img/sx.png"/></div>
			    <div class="shuzi_one"><img src="img/one.png"/></div>
			    <div class="shuzi_two"><img src="img/zero.png"/></div>
			    <div class="shuzi_three"><img src="img/ten.png"/></div>
			    <div class="shuzi_four"><img src="img/zero.png"/></div>
			    <div class="bot">
			    	<img src="img/ss.png"/>
			    	<div class="diwen"><img src="img/dwen.png"/></div>
			    </div>
	    	</div>
	    </div>
	</body>
	<script src="js/vconsole.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//摇一摇(使用DeviceMotion事件, 推荐,应为可以计算加速度)
     if(window.DeviceMotionEvent) {
      var speed = 20;    // 用来判定的加速度阈值，太大了则很难触发
      var x, y, z, lastX, lastY, lastZ;
      x = y = z = lastX = lastY = lastZ = 0;
       
       var sn = 90;
        window.addEventListener('devicemotion', function(event){
        var acceleration = event.accelerationIncludingGravity;
        x = acceleration.x;
        y = acceleration.y;
        
        if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
            // 用户设备摇动了，触发响应操作
            // 此处的判断依据是用户设备的加速度大于我们设置的阈值
//          alert('摇了');
            sn-=0.5;
            if(sn>=0){
            	$(".ydbg img").css("transform","translateX(-"+sn+"%)")
                console.log(sn)
            }else{
            	return;
            }
            
        }
        lastX = x;
        lastY = y;
    }, false);
}        
	</script>
</html>
